<template>
  <div class="first">
    <ul>
      <li v-for="(item,) in list" :key="item.id">
        <a href="#">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, title: '请先登录', url: '/login' },
  { id: 2, title: '免费注册', url: '/register' },
  { id: 3, title: '我的订单', url: '/order' },
  { id: 4, title: '帮助中心', url: '/help' },
  { id: 5, title: '客服中心', url: '/customer' },
  { id: 6, title: '关于我们', url: '/about' },
]);
</script>

<style scoped>
.first {
  width: 1000px;
  height: 30px;
  color: white;
  background-color: black;
}

.first ul {
  margin-left: 600px;
}

.first ul li a {
  margin-left: 15px;
  color: white;
  font-size: 12px;
  line-height: 30px;
}

.first ul li a:hover {
  color: rgb(10, 229, 123);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.first ul li {
  display: inline-block;
}
</style>